<!DOCTYPE html>
<html>
  <head>
    <title>PageDown enhanced editor example</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
    <script src="../../Markdown.Converter.js"></script>
    <script src="../../Markdown.Sanitizer.js"></script>
    <script src="../../Markdown.Editor.js"></script>
    <style type="text/css">.hidden { display:none; }</style>
  </head>
  <body>
    <div class="wmd-panel">
      <div id="wmd-button-bar"></div>
      <div id="warning" class="hidden">You've got too many links or images :(</div>
      <textarea class="wmd-input" id="wmd-input">You should totally add links and images to me.</textarea>
    </div>
    <div id="wmd-preview" class="wmd-panel wmd-preview"></div>
    <script type="text/javascript">
        (function () {
            var converter = Markdown.getSanitizingConverter(),
                editor = new Markdown.Editor(converter),
                warning = document.getElementById('warning'),
                links, images;
        
            converter.hooks.chain('preConversion', function (text) {
                links = images = 0;
                
                return text;
            });
            converter.hooks.chain('linkConversion', function (url) {
                links++;
                
                return url;
            });
            converter.hooks.chain('imageConversion', function (url) {
                images++;
                
                return url;
            });
            converter.hooks.chain('postConversion', function (text) {
                warning.className = images || links > 2 ? '' : 'hidden';
                
                console.log(images||links);
                
                return text;
            });
            
            editor.run();
        })();
    </script>
  </body>
</html>